<!DOCTYPE html>
<html>
<head>
    <title>心理评估详情展示</title>
    {% include 'admin/common/header.html' %}
    <link rel="stylesheet" href="{{ url_for('static', filename='/admin/admin/css/other/score.css') }}"/>
</head>
<body>
<form class="layui-form" action="">
    <div class="mainBox">
        <div class="main-container">
            <div class="layui-card">
            <div class="layui-card-header">今日训练数据评估</div>
            <div class="layui-card-body">
                <table class="layui-table" lay-skin="line",style="min-height:500px">
                    <thead>
                    <tr>
                        <th>今日训练项</th>
                        <th>今日是否完成</th>
                        <th>训练开始时间</th>
                        <th>训练结束时间</th>
                        <th>总用时</th>
                        <th>平均心率</th>
                        <th>压力数据</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <th>过山车</th>
                        <th>是</th>
                        <th>10：00</th>
                        <th>11：00</th>
                        <th>1小时</th>
                        <th>137</th>
                        <th>——</th>
                    </tr>
                    <tr>
                        <th>射箭</th>
                        <th>否</th>
                        <th> </th>
                        <th> </th>
                        <th> </th>
                        <th> </th>
                        <th> </th>
                    </tr>
                    <tr>
                        <td>拳击</td>
                        <th>是</th>
                        <th>11：15</th>
                        <th>12：00</th>
                        <th>45分钟</th>
                        <th>123</th>
                        <th>——</th>
                    </tr>
                    <tr>
                        <td>单板滑雪</td>
                        <th>否</th>
                        <th> </th>
                        <th> </th>
                        <th> </th>
                        <th> </th>
                        <th> </th>
                    </tr>
                    <tr>
                        <td>园艺</td>
                        <th>是</th>
                        <th>17：00</th>
                        <th>18：00</th>
                        <th>1小时</th>
                        <th>90</th>
                        <th>——</th>
                    </tr>
                    <tr>
                        <td>涂鸦创作</td>
                        <th>否</th>
                        <th> </th>
                        <th> </th>
                        <th> </th>
                        <th> </th>
                        <th> </th>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
        </div>

        <div class="main-container">
        <div id="line" style="background-color:#ffffff;min-height:500px;padding: 10px"></div>
        </div>
    </div>
</form>
{% include 'admin/common/footer.html' %}


<script type="text/html" id="police-updateTime">
    {{ '  {{layui.util.toDateString(d.update_at,  "yyyy-MM-dd HH:mm:ss")}' |safe }}}
</script>

<script>

layui.use(['layer', 'echarts', 'element', 'count'], function () {
   var chartDom = document.getElementById('line');
var myChart = echarts.init(chartDom);
var option;

option = {
  title: {
    text: '训练心率变化曲线'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['心率随训练时长变化显示']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: [
      '0',
      '训练15min',
      '训练30min',
      '训练45min',
      '训练60min',
      '训练75min',
      '训练90min',
      '训练105min',
      '训练120min',
      '训练135min',
      '训练150min',
      '训练165min',
      '训练180min'
    ]
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '心率随训练时长变化显示',
      type: 'line',
      stack: 'Total',
      data: [75, 110, 120, 123, 127, 131, 142, 128, 123, 113, 94, 89, 77]
    }
  ]
};

option && myChart.setOption(option);

})

</script>
</body>
</html>